//
//  HomeworkProcessingButton.swift
//  SwiftUIAnimation
//
//  Created by 李煜 on 2024/8/21.
//

import SwiftUI

struct HomeworkProcessingButton: View {
  var body: some View {
    MyOwnCustomBUtton()
    AnimatedButton()
  }
}

#Preview {
  HomeworkProcessingButton()
}

struct MyOwnCustomBUtton: View {
  @State private var isProcessing = false
  var body: some View {
    HStack {
      if isProcessing {
        Circle()
          .trim(from: 0.0, to: 0.8)
          .stroke(.white, lineWidth: 7)
          .frame(width: 40)
          .padding(.horizontal, 10)
          .rotationEffect(.degrees(isProcessing ? 360 : 0))

          .animation(.linear(duration: 4).repeatForever(autoreverses: false).delay(4), value: isProcessing)
      }

      Text(isProcessing ? "Processing" : "Submit")
        .font(.system(.largeTitle, design: .rounded))
        .bold()
        .foregroundStyle(.white)
    }
    .padding(.horizontal, 50)
    .padding(.vertical, 20)
    .background(.green)
    .clipShape(.capsule)
    .onTapGesture {
      isProcessing.toggle()
    }
  }
}

struct AnimatedButton: View {
  @State private var buttonState: ButtonState = .initial

  enum ButtonState {
    case initial, processing, done
  }

  var body: some View {
    Button(action: {
      startProcessing()
    }) {
      HStack {
        if buttonState == .processing {
          // 显示转圈的圆形，并设置为白色
//          ProgressView()
//            .progressViewStyle(CircularProgressViewStyle())
//            .tint(.white) // 设置进度指示器颜色为白色
//            .padding(.trailing, 8)
          // 使用自定义渐变色进度指示器
          GradientProgressView()
            .padding(.trailing, 8)
        }

        // 显示不同状态的标题
        Text(buttonTitle)
          .font(.headline)
          .foregroundColor(.white)
      }
      .padding()
      .frame(width: 200, height: 50)
      .background(buttonColor)
      .cornerRadius(10)
    }
    .disabled(buttonState == .processing) // 处理中时禁用按钮
  }

  private var buttonTitle: String {
    switch buttonState {
    case .initial:
      return "Submit"
    case .processing:
      return "Processing..."
    case .done:
      return "Done"
    }
  }

  private var buttonColor: Color {
    switch buttonState {
    case .initial:
      return .blue
    case .processing:
      return .red
    case .done:
      return .green
    }
  }

  private func startProcessing() {
    withAnimation {
      buttonState = .processing // 设置状态为处理中
    }

    Timer.scheduledTimer(withTimeInterval: 4.0, repeats: false) { _ in
      withAnimation {
        buttonState = .done // 设置状态为完成
      }
    }
  }
}

struct GradientProgressView: View {
  @State private var isAnimating = false

  var body: some View {
    ZStack {
      // 圆形背景
      Circle()
        .stroke(Color.gray.opacity(0.3), lineWidth: 8)
        .frame(width: 20, height: 20)

      // 渐变色圆形进度指示器
      Circle()
        .trim(from: 0, to: 0.75) // 75% 的圆形显示
        .stroke(AngularGradient(
          gradient: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple]),
          center: .center,
          startAngle: .degrees(0),
          endAngle: .degrees(360)
        ), lineWidth: 8)
        .rotationEffect(.degrees(isAnimating ? 360 : 0))
        .animation(.linear(duration: 1)
          .repeatForever(autoreverses: false), value: isAnimating)
        .frame(width: 20, height: 20)
        .onAppear {
          isAnimating = true
        }
    }
  }
}
